<template>
	<view class="indexContent">
		<view>
			<view v-for="(item, index) in list" :key="index">
				<view>
					<messbox :article="item"></messbox>
				</view>
				<view>
					<u-gap height="20" bg-color="#f2f2f2" v-if="index < list.length-1"></u-gap>
				</view>
			</view>
		</view>
		<u-tabbar :hide-tab-bar="true" :list="list" :mid-button="true" inactive-color="#bfbfbf" active-color="#1296db"
		          @change="changeTab"></u-tabbar>
	</view>
</template>

<script>
	import messbox from '@/components/message_box.vue'
	import constant from '@/common/js/utils/constant.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		components: {messbox},
		data() {
			return {
				list: []
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowWidth = res.windowWidth;
				}
			})
		},
    mounted(){
      this.getMyself()
    },
		methods:{
      async getMyself() {
        try {
          const response = await uni.$http.get( 
            `/photo/share/myself?&userId=${uni.getStorageSync('userid')}&current=1&size=100`);
          console.log("我的列表", response.data.data.records);
          this.list = response.data.data.records
        } catch (error) {
          console.error('请求失败:', error);
          uni.showToast({
            title: '请求失败，请稍后重试',
            icon: 'none'
          });
        }
      },
			changeTab(res) {
			  console.log(res);
			  if (res != 2) {
			    this.$changeFun(res);
			  }
			}
		}
	}
</script>
<style>
.u-mode-center-box {
  border-radius: 20rpx !important;
}
page {
	background-color: #f2f2f2;
}
</style>
<style lang="scss" scoped>
	.indexContent{
		padding-bottom: 150rpx;
	}
	.item {
		display: flex;
	}
	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
	
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}
	.pay-tabbar{
		position: fixed;
		bottom: 50px;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		box-shadow: 0 0 2px #f0f0f0;
		display: flex;
		align-items: center;
		padding: 25rpx;
		.left{
			display: flex;
			align-items: center;
			flex: 1;
			font-weight: 600;
			view{
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			
		}
		.right{
			display: flex;
			align-items: center;
			font-weight: 600;
			.price{
				color: red;
				margin-right: 15rpx;
				font-weight: 500;
			}
		}
	}
	.goods-box{
		display: flex;
		padding: 25rpx;
		padding-right: 0;
		&-single{
			// border-bottom: 1px solid #f0f0f0;
		} 
		.selected-box{
			width: 35rpx;
			position: relative;
			image{
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				top: 50%;
				margin-top: -18rpx;
			}
		}
		.goods-img{
			width:180rpx;
			height: 180rpx;
			overflow: hidden;
			border-radius: 5rpx;
			box-shadow: 0 0 2px #f0f0f0;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content{
			flex: 1;
			margin-left: 18rpx;
			.title{
				width: 400rpx;
				font-size: 32rpx;
				font-weight: 700;
				margin-bottom: 18rpx;
				.text-box{
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.info{
				color: #DCDFE6;
				font-size: 23rpx;
				margin-bottom: 18rpx;
			}
			.price{
				.big-text{
					font-weight: 800;
					font-size: 35rpx;
				}
			}
			.count{
				display: flex;
				justify-content: flex-end;
			}
		}
	}
	
	
	
	
	
	
</style>